/*
* @Author: syyao
* @Date: 2019-05-17 15:22:46
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-12 21:38:21
*/
/*
* @Author: hui
* @Date: 2019-05-27 01:49:07
* @Last Modified by: hui
* @Last Modified time: 2019-05-27 01:49:07
*/
<template>
    <div>
        <div class="top">
            <div class="top-cell">
                <Row style="height: 100%">
                    <i-col span="12" style="height: 100%">
                        <div
                            style="margin-left: 2.1vw;font-size: 1.2vw;color: #44519E;font-weight: bold;font-family: DengXian;"
                        >图库</div>
                    </i-col>
                    <i-col span="12" style="height: 100%">
                        <p></p>
                    </i-col>
                </Row>
            </div>
        </div>

        <div style="border-bottom: #70707052 1px solid;"> 
            <SearchWithTips style="width: 18vw;margin:1vw auto 1.5vw"></SearchWithTips>
        </div>

        <!-- <div class="middle" v-on:click="linkto('search')" v-bind:class="{'middleChoosen':'search'===routerName}">
            <Row>
                <i-col span="6">
                    <img class="img-set" src="../../assets/search.png">
                </i-col>
                <i-col span="18">
                    <p class="p-setTitle">检索图片</p>
                    <p class="p-setAddTitle">已查询到符合标签的图片有 50 张</p>
                </i-col>
            </Row>
        </div> -->

        <div class="middle" v-on:click="linkto('recommend')" v-bind:class="{'middleChoosen':'recommend'===routerName}">
            <Row>
                <i-col span="6">
                    <img class="img-set" src="../../assets/hot1.png">
                </i-col>
                <i-col span="18">
                    <p class="p-setTitle">热门推荐</p>
                    <p class="p-setAddTitle">Today</p>
                </i-col>
            </Row>
        </div>

        <div class="middle" v-on:click="linkto('follow')" v-bind:class="{'middleChoosen':'follow'===routerName}">
            <Row>
                <i-col span="6">
                    <img class="img-set" src="../../assets/collect.png">
                </i-col>
                <i-col span="18">
                    <p class="p-setTitle">我关注的</p>
                    <p class="p-setAddTitle">Today</p>
                </i-col>
            </Row>
        </div>

        <div class="middle" v-on:click="linkto('other')" v-bind:class="{'middleChoosen':'other'===routerName}">
            <Row>
                <i-col span="6">
                    <img class="img-set" src="../../assets/smile.png">
                </i-col>
                <i-col span="18">
                    <p class="p-setTitle">其他推荐</p>
                    <p class="p-setAddTitle">Today</p>
                </i-col>
            </Row>
        </div>

        <div class="middle" v-on:click="linkto('collect')" v-bind:class="{'middleChoosen':'collect'===routerName}">
            <Row>
                <i-col span="6">
                    <img class="img-set" src="../../assets/collect1.png">
                </i-col>
                <i-col span="18">
                    <p class="p-setTitle">我的收藏</p>
                    <p class="p-setAddTitle">Collections</p>
                </i-col>
            </Row>
        </div>

    </div>
</template>

<script>
import SearchWithTips from "../SearchWithTips1";
export default {
  name: "SecondMune",
  props: {
    name: {
      type: String
    }
  },
  data(){
      return{
          routerName:''
      }
  },
  created(){
    this.routerName=this.$route.name
  },
  methods: {
    linkto(path) {
      this.$router.push({ name: path });
    }
  },
  watch: {
    $route(to, from) {
      this.routerName=this.$route.name
    }
  },
  components: {
            SearchWithTips,
  }
};
</script>

<style scoped>
.top {
  height: 5vw;
}

.top-cell {
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
  width: 15vw;
}

.top:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.middle {
  border-bottom: #70707052 1px solid;
  height: 4.5vw;
}

.middle-cell {
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
  width: 15vw;
}

.middle:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.middle:hover {
  background-color: #ffffff;
}

.middleChoosen {
  background-color: #ffffff;
}

.p-setTitle {
  margin-left: 1vw;
  margin-top: 0.7vw;
  font-size: 0.9vw;
  text-align: left;
  color: #44519e;
  font-weight: bold;
  font-family: DengXian;
}

.p-setAddTitle {
  margin-left: 1vw;
  margin-top: 0.5vw;
  color: #1dacff;
  font-family: DengXian;
  font-weight: bold;
  font-size: 0.73vw;
}

.img-set {
  width: 2.4vw;
  margin-top: 0.9vw;
  margin-left: 2.1vw;
}
</style>